<template>
  <div class="secfill-order-warpper">
    <div v-if="!adressDetail" class="empty">
      <router-link :to="{path:'/addressManage',query:{userId:userId}}">
        + 添加收货地址
      </router-link>
      
    </div>
    <div v-else class="address-box">
      <!-- <img src="../assets/images/11.png" alt="" class="left"> -->
       <router-link :to="{path:'/addressManage',query:{userId:userId}}">
        <div class="middle">
          <div class="section-line">收货人：{{adressDetail.personName}}
            <span class="phone">{{adressDetail.phone}}</span>
          </div>
          <div class="address-line">收货地址：<span>{{adressDetail.areaCode}}{{adressDetail.address}}</span></div>
        </div>
        <div class="right">
          <img src="../assets/images/17.png" alt="" srcset="">
        </div>
       </router-link>
    </div>
    <div class="fengeBar"></div>
    <group>
      <cell-box class="product-box">
        <img :src="goods.logo" alt="" class="left">
        <div class="middle flex">
            <div>
                <div class="name-box">{{goods.name}}</div>
                <div class="section-line">{{""}}</div>
                <div class="price-box">￥{{goods.discountPrice}} <span>￥{{goods.price}}</span></div>
            </div>

          <span>x{{num}}</span>
        </div>
        <div class="right"></div>
      </cell-box>
      <cell title="商品合计"  :value="goods.discountPrice*num"></cell>
      <cell title="运费" :value="goods.postPrice"></cell>
      <!-- <cell title="优惠券" :value="getMyKeyon.name" is-link></cell> -->
    </group>

    <div class="fill-bom flex">
        <div>合计：￥{{totalPrice}} </div>
        <a href="javascript:;" @click="submit">提交订单</a>
    </div>
  </div>
</template>

<script>
import axios from '@/api/request'
  import {CellBox,Group,Cell} from "vux";
  import { mapGetters } from "vuex";
  export default {
    components: {CellBox,Cell,Group,},
    data () {
      return {
        shopSize:{},
        adressDetail: null,
        shopText:{},
        getMyKeyon:{},
        num:1,
        goods: {
          logo: '',
          discountPrice: '',
          name: '',
          price: '',
        },
        goodsId: '',
        order: null,
        realName: '',
        totalPrice: null,
      }
    },
    computed:{
      ...mapGetters({
        openId: 'doneOpenId',
        userId: 'doneUserId',
        phone: 'donePhone',
        schoolId: 'doneSchoolId',
      }),
    },
    created() {
      this.goodsId = this.$route.query.goodsId
      this.getUser(this.openId)
      this.getGoodsInfo(this.goodsId)
    },
    mounted(){
      this.getedress()
    },
    methods:{
      getUser(openId){
        let data = {
                openId: this.openId
            }
        axios('/device/userEntity/getUserByOpenId','post',data).then(res=>{
          if(res.data.code==1000){
            // console.log(res)
            var userData = res.data.data.userCenter
            if(userData){
              this.realName = userData.realName
            }
          }
        })
      },
      getGoodsInfo(id){   //获取商品信息
        var self=this 
        axios('/device/productSecond/getById','post',{id: id}).then(res=>{
          if(res.data.code==1000){
              // console.log(res)
              self.goods = res.data.data.product
              self.totalPrice = self.goods.discountPrice*self.num+self.goods.postPrice
          }
        })
      },
      getedress(){   //获取地址
        var self=this    ///device/userAddress/findUserAddress/{userId}
        axios('/device/userAddress/findUserAddress/'+this.userId,'post',{}).then(res=>{
          if(res.data.code==1000){
            console.log(res)
            self.adressDetail=res.data.data
          }
        })
      },
      submit() {      //提交订单
        let data = {
              openId: this.openId,
              totalPrice: this.totalPrice,
              secondProductId: this.goodsId,
              count: this.num,
              realName: this.realName,
              userAddressId: this.adressDetail.id, 
        } 
        console.log(data)
        if(!data.userAddressId){
          self.$vux.toast.text('收货地址不能为空', 'middle')
        }else{
          axios('/device/weChatPay/','post',data).then(res=>{
            // console.log(res)
            this.jsApiParameters=res.data.finalpackage
            // this.jsApiParameters=res.data.parameters
            this.callpay()
          })
        }
      },
      callpay() {
        if(typeof WeixinJSBridge == "undefined"){
          if( document.addEventListener ){
              document.addEventListener('WeixinJSBridgeReady', this.jsApiCall, false);
          }else if (document.attachEvent){
              document.attachEvent('WeixinJSBridgeReady', this.jsApiCall); 
              document.attachEvent('onWeixinJSBridgeReady', this.jsApiCall);
          }
        }else{
          this.jsApiCall();
        }
      },
      jsApiCall() {
        let _this=this
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest',
          this.jsApiParameters,
          function(res){
              WeixinJSBridge.log(res.err_msg);
              // this.$router.push({ path:'/Mypersonal'})
              if(res.err_msg == "get_brand_wcpay_request:ok"){
                //alert(res.err_code+res.err_desc+res.err_msg);
                // window.location.href="http://www.baidu.com"
                _this.$router.push({path:'/paySuccess'})
              }else{
                  //返回跳转到订单详情页面
                  alert(支付失败);   
              }
          }
        );
      },
      str2Obj(str){
        let a = JSON.parse(str)
        return a
      }
    }
  };
</script>

<style>
   /* body{
        position: absolute;
        left: 0;
        top: 0;
        background: #f3f5f9;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }*/
    .vux-label{
        font-size: 14px;
        color: #444;
    }
</style>
<style lang="less" scoped>
  .secfill-order-warpper{
    height: 100%;
    background: #f2f3f6;
  }
  .product-box {
    display: flex;
    height: 180rem/75;
    .left {
      flex-grow: 0;
      width: 148rem/75;
      height: 148rem/75;
      border-radius: 5px;
      position: absolute;
    }
    .middle {
      flex-grow: 1;
      margin-left: 96rem/37.5;
      justify-content: space-between;
      .name-box {
        color: #333;
        font-size: 14rem/37.5;
      }
      .section-line {
        margin-top: 0;
        font-size: 12rem/37.5;
        color: #a4a4a4;
        margin-top: 8rem/75;
      }
      .price-box {
        color: #333;
        font-size: 12rem/37.5;
        margin-top: 8rem/75;
        span{
            color:#999;
            text-decoration: line-through;
            margin-left: 10rem/75;
        }
      }
    }
    .right {
      flex-grow: 0;
    }
  }
  .empty{
    height: 96rem/75;
    line-height: 96rem/75;
    background: #fff;
    text-align: center;
    color: #333;
    font-size: 14rem/37.5;
  }
  .address-box {
    position: relative;
    height: 210rem/75;
    position: relative;
    padding:25rem/75 0 0;
    // padding-bottom: 50rem/75;
    background: #fff;
    overflow: hidden;
    a{
      display: block;
    }
    .left {
      position: absolute;
      width: 16rem/37.5;
      height: 18rem/37.5;
      top: 26rem/37.5;
      left: 13rem/37.5;
    }
    .middle {
      // margin-left: 43rem/37.5;
      // margin-right: 33rem/37.5;
      padding-left: 15rem/75;
      padding-right: 20rem/75;
      .section-line {
        font-size: 15rem/37.5;
        color: #333;
      }
      .address-line{
        font-size: 15rem/37.5;
        margin-top: 7rem/37.5;
        padding-right: 20rem/75;
        color: #333;
        line-height: 46rem/75;
        span{
          // font-size: 12rem/37.5;
        }
      }
      .phone{
        font-size: 14rem/37.5;
        margin-top: 0;
        margin-left: 252rem/75;
      }
    }
    .right {
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      width: 22rem/37.5;
      display: flex;
      align-items: center;
      img {
        width: 8rem/37.5;
        height: 14rem/37.5;
      }

    }
  }
  .fengeBar{
    height:25rem/75;
    background:#f2f3f6;
    width:100%;
  }
  .fill-bom{
    position:fixed;
    bottom: 0;
    left:0;
    height:95rem/75;
    align-items:center;
    box-shadow:-2px 0 10px 2px rgba(0,0,0,.6);
    width:100%;
    justify-content: space-between;
    div{
        width:465rem/75;
        text-align: center;
        font-size:32rem/75;
        color: #ff4444;
    }
    a{
        flex: 1;
        text-align: center;
        background: #ffda44;
        height:100%;
        line-height: 95rem/75;
        font-size:32rem/75;
        color: #444444;
    }
  }
</style>

<style>
  .secfill-order-warpper .weui-cells:before {
    content: none;
  }
  .secfill-order-warpper .weui-cell:before{
    left: 0;
  }
  .secfill-order-warpper .weui-cells:after {
    border-bottom: 1rem/37.5 solid #dbdbdb;
  }

  .secfill-order-warpper .weui-cell:before {
    border-top: 1rem/37.5 solid #dbdbdb;
  }
  .secfill-order-warpper .weui-cells{
    margin-top: 0;
  }
  .vux-label{
    font-size: 0.32rem;
  }

</style>